Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / tools / PaperMessagePage.vue

Displaying Raw • Download

Tb4b4b4<Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"

Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 overflow-y-auto w-full"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"p-3 md:p-4 max-w-5xl mx-auto w-full"Tb4b4b4>

T8b949e<!-- header -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"glass-card mb-4"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-3"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-xl"Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"qrcode" Te6edf3classTff7b72=Ta5d6ff"size-6" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72h2 Te6edf3classTff7b72=Ta5d6ff"text-xl font-bold text-gray-900 dark:text-white tracking-tight"Tb4b4b4>

Paper Message Generator

Tb4b4b4<Tb4b4b4/Tff7b72h2Tb4b4b4>

Tb4b4b4<Tff7b72p Te6edf3classTff7b72=Ta5d6ff"text-xs text-gray-600 dark:text-gray-400"Tb4b4b4>

Generate signed LXMF messages for physical delivery or offline transfer.

Tb4b4b4<Tb4b4b4/Tff7b72pTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"grid grid-cols-1 lg:grid-cols-2 gap-4"Tb4b4b4>

T8b949e<!-- composer -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"space-y-4"Tb4b4b4>

Tb4b4b4<Tff7b72section Te6edf3classTff7b72=Ta5d6ff"glass-card"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"glass-card__header"Tb4b4b4>

Tb4b4b4<Tff7b72h2 Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-2"Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"pencil-outline" Te6edf3classTff7b72=Ta5d6ff"size-5 text-gray-400" Tb4b4b4/Tb4b4b4>

Compose Message

Tb4b4b4<Tb4b4b4/Tff7b72h2Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"glass-card__body space-y-3"Tb4b4b4>

Tb4b4b4<Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72label

Te6edf3classTff7b72=Ta5d6ff"block text-[10px] font-bold text-gray-400 dark:text-zinc-500 uppercase tracking-widest mb-1.5"

Tb4b4b4>

Recipient Address

Tb4b4b4<Tb4b4b4/Tff7b72labelTb4b4b4>

Tb4b4b4<Tff7b72input

Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3destinationHashTa5d6ff"

Te6edf3typeTff7b72=Ta5d6ff"text"

Te6edf3placeholderTff7b72=Ta5d6ff"Destination hash (e.g. a39610...)"

Te6edf3classTff7b72=Ta5d6ff"input-field font-mono text-sm"

Te6edf3maxlengthTff7b72=Ta5d6ff"32"

Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72label

Te6edf3classTff7b72=Ta5d6ff"block text-[10px] font-bold text-gray-400 dark:text-zinc-500 uppercase tracking-widest mb-1.5"

Tb4b4b4>

Subject (Optional)

Tb4b4b4<Tb4b4b4/Tff7b72labelTb4b4b4>

Tb4b4b4<Tff7b72input

Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3titleTa5d6ff"

Te6edf3typeTff7b72=Ta5d6ff"text"

Te6edf3placeholderTff7b72=Ta5d6ff"Message title..."

Te6edf3classTff7b72=Ta5d6ff"input-field text-sm"

Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72label

Te6edf3classTff7b72=Ta5d6ff"block text-[10px] font-bold text-gray-400 dark:text-zinc-500 uppercase tracking-widest mb-1.5"

Tb4b4b4>

Message Content

Tb4b4b4<Tb4b4b4/Tff7b72labelTb4b4b4>

Tb4b4b4<Tff7b72textarea

Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3contentTa5d6ff"

Te6edf3rowsTff7b72=Ta5d6ff"4"

Te6edf3placeholderTff7b72=Ta5d6ff"Type your message here..."

Te6edf3classTff7b72=Ta5d6ff"input-field resize-none text-sm"

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72textareaTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"w-full flex items-center justify-center gap-2 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold shadow-lg shadow-blue-500/20 transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none text-sm"

Tb4b4b4:Te6edf3disabledTff7b72=Ta5d6ff"Tff7b72!Te6edf3canGenerate Tff7b72|| Te6edf3isGeneratingTa5d6ff"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3generatePaperMessageTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72template Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isGeneratingTa5d6ff"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"size-4 border-2 border-white/20 border-t-white rounded-full animate-spin"

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Generating...

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72template Te6edf3v-elseTb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"qrcode-plus" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>

Generate Paper Message

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72sectionTb4b4b4>

T8b949e<!-- read / ingest section -->

Tb4b4b4<Tff7b72section Te6edf3classTff7b72=Ta5d6ff"glass-card"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"glass-card__header"Tb4b4b4>

Tb4b4b4<Tff7b72h2 Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-2"Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"qrcode-scan" Te6edf3classTff7b72=Ta5d6ff"size-5 text-gray-400" Tb4b4b4/Tb4b4b4>

Ingest Paper Message

Tb4b4b4<Tb4b4b4/Tff7b72h2Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"glass-card__body space-y-3"Tb4b4b4>

Tb4b4b4<Tff7b72p Te6edf3classTff7b72=Ta5d6ff"text-xs text-gray-600 dark:text-gray-400"Tb4b4b4>

Paste an LXMF URI to decode and add it to your conversations.

Tb4b4b4<Tb4b4b4/Tff7b72pTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex gap-2"Tb4b4b4>

Tb4b4b4<Tff7b72input

Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3ingestUriTa5d6ff"

Te6edf3typeTff7b72=Ta5d6ff"text"

Te6edf3placeholderTff7b72=Ta5d6ff"lxmf://..."

Te6edf3classTff7b72=Ta5d6ff"input-field flex-1 font-mono text-sm"

Tb4b4b4@Te6edf3keydownTb4b4b4.Te6edf3enterTff7b72=Ta5d6ff"Te6edf3ingestPaperMessageTa5d6ff"

Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"px-3 py-2 bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 rounded-xl hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3pasteFromClipboardTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"content-paste" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"w-full py-2.5 px-4 bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-zinc-200 rounded-xl font-bold hover:bg-gray-200 dark:hover:bg-zinc-700 transition-all active:scale-[0.98] text-sm"

Tb4b4b4:Te6edf3disabledTff7b72=Ta5d6ff"Tff7b72!Te6edf3ingestUriTa5d6ff"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3ingestPaperMessageTa5d6ff"

Tb4b4b4>

Read LXM

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72sectionTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- preview / result -->

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"space-y-4"Tb4b4b4>

Tb4b4b4<Tff7b72section Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3generatedUriTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"glass-card overflow-hidden"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"glass-card__header bg-blue-50/50 dark:bg-blue-900/10"Tb4b4b4>

Tb4b4b4<Tff7b72h2 Te6edf3classTff7b72=Ta5d6ff"text-blue-600 dark:text-blue-400"Tb4b4b4>Generated QR CodeTb4b4b4<Tb4b4b4/Tff7b72h2Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"glass-card__body flex flex-col items-center p-4 sm:p-6"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"p-3 bg-white rounded-2xl shadow-inner border border-gray-100 mb-6"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"size-40 sm:size-48 flex items-center justify-center overflow-hidden"Tb4b4b4>

Tb4b4b4<Tff7b72canvas Te6edf3refTff7b72=Ta5d6ff"qrcode"Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72canvasTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"w-full space-y-3"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"bg-gray-50 dark:bg-zinc-800/50 rounded-2xl p-3 border border-gray-100 dark:border-zinc-700/50"

Tb4b4b4>

Tb4b4b4<Tff7b72label

Te6edf3classTff7b72=Ta5d6ff"block text-[9px] font-bold text-gray-400 dark:text-zinc-500 uppercase tracking-widest mb-1.5"

Tb4b4b4>

LXMF URI

Tb4b4b4<Tb4b4b4/Tff7b72labelTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex gap-2"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"flex-1 font-mono text-[10px] break-all text-gray-600 dark:text-zinc-300 bg-white dark:bg-zinc-900 p-2 rounded-lg border border-gray-200 dark:border-zinc-700 max-h-20 overflow-y-auto"

Tb4b4b4>

Tff7b72{{ Te6edf3generatedUri Tff7b72}}

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"size-9 flex items-center justify-center bg-white dark:bg-zinc-900 text-gray-500 dark:text-zinc-400 rounded-lg border border-gray-200 dark:border-zinc-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 transition-all shadow-sm"

Te6edf3titleTff7b72=Ta5d6ff"Copy URI"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3copyUriTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"content-copy" Te6edf3classTff7b72=Ta5d6ff"size-4" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex gap-2 pt-1"Tb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"flex-1 flex items-center justify-center gap-2 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold shadow-lg shadow-blue-500/20 transition-all active:scale-[0.98] text-sm"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3printQRCodeTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"printer" Te6edf3classTff7b72=Ta5d6ff"size-4" Tb4b4b4/Tb4b4b4>

Print

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"flex-1 flex items-center justify-center gap-2 py-2.5 px-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold shadow-lg shadow-emerald-500/20 transition-all active:scale-[0.98] text-sm"

Tb4b4b4:Te6edf3disabledTff7b72=Ta5d6ff"Te6edf3isSendingTa5d6ff"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3sendPaperMessageTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72template Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isSendingTa5d6ff"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"size-4 border-2 border-white/20 border-t-white rounded-full animate-spin"

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Sending...

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72template Te6edf3v-elseTb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"send" Te6edf3classTff7b72=Ta5d6ff"size-4" Tb4b4b4/Tb4b4b4>

Send

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72sectionTb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-else

Te6edf3classTff7b72=Ta5d6ff"glass-card flex flex-col items-center justify-center p-8 text-center h-[320px] border-dashed"

Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"p-3 bg-gray-100 dark:bg-zinc-800 text-gray-400 rounded-full mb-3"Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"qrcode" Te6edf3classTff7b72=Ta5d6ff"size-10" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72h3 Te6edf3classTff7b72=Ta5d6ff"text-base font-bold text-gray-900 dark:text-white mb-1"Tb4b4b4>No QR Code GeneratedTb4b4b4<Tb4b4b4/Tff7b72h3Tb4b4b4>

Tb4b4b4<Tff7b72p Te6edf3classTff7b72=Ta5d6ff"text-xs text-gray-500 dark:text-gray-400 max-w-[200px]"Tb4b4b4>

Fill out the message details and click generate to create a signed paper message.

Tb4b4b4<Tb4b4b4/Tff7b72pTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72scriptTb4b4b4>

Tff7b72import Te6edf3QRCode Tff7b72from Ta5d6ff"qrcode"Tb4b4b4;

Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"../MaterialDesignIcon.vue"Tb4b4b4;

Tff7b72import Te6edf3WebSocketConnection Tff7b72from Ta5d6ff"../../js/WebSocketConnection"Tb4b4b4;

Tff7b72import Te6edf3ToastUtils Tff7b72from Ta5d6ff"../../js/ToastUtils"Tb4b4b4;

Tff7b72export Tff7b72default Tb4b4b4{

Te6edf3nameTff7b72: Ta5d6ff"PaperMessagePage"Tb4b4b4,

Te6edf3componentsTff7b72: Tb4b4b4{ Te6edf3MaterialDesignIcon Tb4b4b4}Tb4b4b4,

Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72return Tb4b4b4{

Te6edf3destinationHashTff7b72: Ta5d6ff""Tb4b4b4,

Te6edf3titleTff7b72: Ta5d6ff""Tb4b4b4,

Te6edf3contentTff7b72: Ta5d6ff""Tb4b4b4,

Te6edf3isGeneratingTff7b72: Tff7b72falseTb4b4b4,

Te6edf3generatedUriTff7b72: Tff7b72nullTb4b4b4,

Te6edf3ingestUriTff7b72: Ta5d6ff""Tb4b4b4,

Te6edf3isSendingTff7b72: Tff7b72falseTb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3computedTff7b72: Tb4b4b4{

Te6edf3canGenerateTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72return Tff7b72thisTb4b4b4.Te6edf3destinationHashTb4b4b4.Te6edf3length Tff7b72=== T79c0ff32 Tff7b72&& Tff7b72thisTb4b4b4.Te6edf3contentTb4b4b4.Te6edf3length Tff7b72> T79c0ff0Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3mountedTb4b4b4(Tb4b4b4) Tb4b4b4{

Te6edf3WebSocketConnectionTb4b4b4.Te6edf3onTb4b4b4(Ta5d6ff"message"Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3onWebsocketMessageTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3beforeUnmountTb4b4b4(Tb4b4b4) Tb4b4b4{

Te6edf3WebSocketConnectionTb4b4b4.Te6edf3offTb4b4b4(Ta5d6ff"message"Tb4b4b4, Tff7b72thisTb4b4b4.Te6edf3onWebsocketMessageTb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3methodsTff7b72: Tb4b4b4{

Tff7b72async Te6edf3onWebsocketMessageTb4b4b4(Te6edf3messageTb4b4b4) Tb4b4b4{

Tff7b72const Te6edf3json Tff7b72= Tffa657JSONTb4b4b4.Te6edf3parseTb4b4b4(Te6edf3messageTb4b4b4.Te6edf3dataTb4b4b4)Tb4b4b4;

Tff7b72if Tb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"lxm.generate_paper_uri.result"Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isGenerating Tff7b72= Tff7b72falseTb4b4b4;

Tff7b72if Tb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3status Tff7b72=== Ta5d6ff"success"Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3generatedUri Tff7b72= Te6edf3jsonTb4b4b4.Te6edf3uriTb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3renderQRCodeTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tb4b4b4} Tff7b72else Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3messageTb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4} Tff7b72else Tff7b72if Tb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"lxm.ingest_uri.result"Tb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3status Tff7b72=== Ta5d6ff"success"Tb4b4b4) Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3successTb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3messageTb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3ingestUri Tff7b72= Ta5d6ff""Tb4b4b4;

Tb4b4b4} Tff7b72else Tff7b72if Tb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3status Tff7b72=== Ta5d6ff"error"Tb4b4b4) Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3messageTb4b4b4)Tb4b4b4;

Tb4b4b4} Tff7b72else Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3warningTb4b4b4(Te6edf3jsonTb4b4b4.Te6edf3messageTb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3generatePaperMessageTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Tff7b72!Tff7b72thisTb4b4b4.Te6edf3canGenerateTb4b4b4) Tff7b72returnTb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3isGenerating Tff7b72= Tff7b72trueTb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3generatedUri Tff7b72= Tff7b72nullTb4b4b4;

Te6edf3WebSocketConnectionTb4b4b4.Te6edf3sendTb4b4b4(

Tffa657JSONTb4b4b4.Te6edf3stringifyTb4b4b4(Tb4b4b4{

Te6edf3typeTff7b72: Ta5d6ff"lxm.generate_paper_uri"Tb4b4b4,

Te6edf3destination_hashTff7b72: Tff7b72thisTb4b4b4.Te6edf3destinationHashTb4b4b4,

Te6edf3contentTff7b72: Tff7b72thisTb4b4b4.Te6edf3contentTb4b4b4,

Te6edf3titleTff7b72: Tff7b72thisTb4b4b4.Te6edf3titleTb4b4b4,

Tb4b4b4}Tb4b4b4)

Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3renderQRCodeTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Tff7b72!Tff7b72thisTb4b4b4.Te6edf3generatedUri Tff7b72|| Tff7b72!Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3qrcodeTb4b4b4) Tff7b72returnTb4b4b4;

Tff7b72try Tb4b4b4{

Tff7b72await Te6edf3QRCodeTb4b4b4.Te6edf3toCanvasTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3qrcodeTb4b4b4, Tff7b72thisTb4b4b4.Te6edf3generatedUriTb4b4b4, Tb4b4b4{

Te6edf3widthTff7b72: T79c0ff256Tb4b4b4,

Te6edf3marginTff7b72: T79c0ff2Tb4b4b4,

Te6edf3colorTff7b72: Tb4b4b4{

Te6edf3darkTff7b72: Ta5d6ff"#000000"Tb4b4b4,

Te6edf3lightTff7b72: Ta5d6ff"#ffffff"Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3errorCorrectionLevelTff7b72: Ta5d6ff"L"Tb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72const Te6edf3el Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3qrcodeTb4b4b4;

Tff7b72if Tb4b4b4(Te6edf3elTb4b4b4) Tb4b4b4{

Te6edf3elTb4b4b4.Te6edf3styleTb4b4b4.Te6edf3maxWidth Tff7b72= Ta5d6ff"100%"Tb4b4b4;

Te6edf3elTb4b4b4.Te6edf3styleTb4b4b4.Te6edf3height Tff7b72= Ta5d6ff"auto"Tb4b4b4;

Te6edf3elTb4b4b4.Te6edf3classListTb4b4b4.Te6edf3addTb4b4b4(Ta5d6ff"rounded-lg"Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errTb4b4b4) Tb4b4b4{

Te6edf3consoleTb4b4b4.Te6edf3errorTb4b4b4(Ta5d6ff"Failed to render QR code:"Tb4b4b4, Te6edf3errTb4b4b4)Tb4b4b4;

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"messages.failed_render_qr"Tb4b4b4)Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3ingestPaperMessageTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Tff7b72!Tff7b72thisTb4b4b4.Te6edf3ingestUriTb4b4b4) Tff7b72returnTb4b4b4;

Te6edf3WebSocketConnectionTb4b4b4.Te6edf3sendTb4b4b4(

Tffa657JSONTb4b4b4.Te6edf3stringifyTb4b4b4(Tb4b4b4{

Te6edf3typeTff7b72: Ta5d6ff"lxm.ingest_uri"Tb4b4b4,

Te6edf3uriTff7b72: Tff7b72thisTb4b4b4.Te6edf3ingestUriTb4b4b4,

Tb4b4b4}Tb4b4b4)

Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3pasteFromClipboardTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72try Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3ingestUri Tff7b72= Tff7b72await Te6edf3navigatorTb4b4b4.Te6edf3clipboardTb4b4b4.Te6edf3readTextTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4} Tff7b72catch Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"messages.failed_read_clipboard"Tb4b4b4)Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3copyUriTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72try Tb4b4b4{

Tff7b72await Te6edf3navigatorTb4b4b4.Te6edf3clipboardTb4b4b4.Te6edf3writeTextTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3generatedUriTb4b4b4)Tb4b4b4;

Te6edf3ToastUtilsTb4b4b4.Te6edf3successTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"messages.uri_copied"Tb4b4b4)Tb4b4b4)Tb4b4b4;

Tb4b4b4} Tff7b72catch Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"messages.failed_copy_uri"Tb4b4b4)Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Te6edf3downloadQRCodeTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72const Te6edf3canvas Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3qrcodeTb4b4b4;

Tff7b72if Tb4b4b4(Tff7b72!Te6edf3canvasTb4b4b4) Tff7b72returnTb4b4b4;

Tff7b72const Te6edf3dataUrl Tff7b72= Te6edf3canvasTb4b4b4.Te6edf3toDataURLTb4b4b4(Ta5d6ff"image/png"Tb4b4b4)Tb4b4b4;

Tff7b72if Tb4b4b4(Te6edf3dataUrlTb4b4b4) Tb4b4b4{

Tff7b72const Te6edf3link Tff7b72= Tffa657documentTb4b4b4.Te6edf3createElementTb4b4b4(Ta5d6ff"a"Tb4b4b4)Tb4b4b4;

Te6edf3linkTb4b4b4.Te6edf3download Tff7b72= Ta5d6ff`Ta5d6fflxmf-paper-message-Tffd700${Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4)Tffd700}Ta5d6ff.pngTa5d6ff`Tb4b4b4;

Te6edf3linkTb4b4b4.Te6edf3href Tff7b72= Te6edf3dataUrlTb4b4b4;

Te6edf3linkTb4b4b4.Te6edf3clickTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Tff7b72async Te6edf3sendPaperMessageTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72const Te6edf3canvas Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3qrcodeTb4b4b4;

Tff7b72if Tb4b4b4(Tff7b72!Te6edf3canvas Tff7b72|| Tff7b72!Tff7b72thisTb4b4b4.Te6edf3destinationHash Tff7b72|| Tff7b72!Tff7b72thisTb4b4b4.Te6edf3generatedUriTb4b4b4) Tff7b72returnTb4b4b4;

Tff7b72try Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isSending Tff7b72= Tff7b72trueTb4b4b4;

T8b949e// get data url from canvas (format: data:image/png;base64,iVBORw0KG...)

Tff7b72const Te6edf3dataUrl Tff7b72= Te6edf3canvasTb4b4b4.Te6edf3toDataURLTb4b4b4(Ta5d6ff"image/png"Tb4b4b4)Tb4b4b4;

T8b949e// extract base64 data by removing the prefix

Tff7b72const Te6edf3imageBytes Tff7b72= Te6edf3dataUrlTb4b4b4.Te6edf3splitTb4b4b4(Ta5d6ff","Tb4b4b4)Tb4b4b4[T79c0ff1Tb4b4b4]Tb4b4b4;

T8b949e// build lxmf message

Tff7b72const Te6edf3lxmf_message Tff7b72= Tb4b4b4{

Te6edf3destination_hashTff7b72: Tff7b72thisTb4b4b4.Te6edf3destinationHashTb4b4b4,

Te6edf3contentTff7b72: Tff7b72thisTb4b4b4.Te6edf3generatedUriTb4b4b4,

Te6edf3fieldsTff7b72: Tb4b4b4{

Te6edf3imageTff7b72: Tb4b4b4{

Te6edf3image_typeTff7b72: Ta5d6ff"png"Tb4b4b4,

Te6edf3image_bytesTff7b72: Te6edf3imageBytesTb4b4b4,

Te6edf3nameTff7b72: Ta5d6ff"qrcode.png"Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

T8b949e// send message

Tff7b72const Te6edf3response Tff7b72= Tff7b72await Tffa657windowTb4b4b4.Te6edf3axiosTb4b4b4.Te6edf3postTb4b4b4(Ta5d6ff`Ta5d6ff/api/v1/lxmf-messages/sendTa5d6ff`Tb4b4b4, Tb4b4b4{

Te6edf3delivery_methodTff7b72: Ta5d6ff"opportunistic"Tb4b4b4,

Te6edf3lxmf_messageTff7b72: Te6edf3lxmf_messageTb4b4b4,

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72if Tb4b4b4(Te6edf3responseTb4b4b4.Te6edf3dataTb4b4b4.Te6edf3status Tff7b72=== Ta5d6ff"success"Tb4b4b4) Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3successTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"messages.paper_message_sent"Tb4b4b4)Tb4b4b4)Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3generatedUri Tff7b72= Tff7b72nullTb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3destinationHash Tff7b72= Ta5d6ff""Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3content Tff7b72= Ta5d6ff""Tb4b4b4;

Tff7b72thisTb4b4b4.Te6edf3title Tff7b72= Ta5d6ff""Tb4b4b4;

Tb4b4b4} Tff7b72else Tb4b4b4{

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Te6edf3responseTb4b4b4.Te6edf3dataTb4b4b4.Te6edf3message Tff7b72|| Ta5d6ff"Failed to send paper message"Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3errTb4b4b4) Tb4b4b4{

Te6edf3consoleTb4b4b4.Te6edf3errorTb4b4b4(Ta5d6ff"Failed to send paper message:"Tb4b4b4, Te6edf3errTb4b4b4)Tb4b4b4;

Te6edf3ToastUtilsTb4b4b4.Te6edf3errorTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"messages.failed_send_paper"Tb4b4b4)Tb4b4b4)Tb4b4b4;

Tb4b4b4} Tff7b72finally Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3isSending Tff7b72= Tff7b72falseTb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Te6edf3printQRCodeTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72const Te6edf3canvas Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3qrcodeTb4b4b4;

Tff7b72if Tb4b4b4(Tff7b72!Te6edf3canvasTb4b4b4) Tff7b72returnTb4b4b4;

Tff7b72const Te6edf3dataUrl Tff7b72= Te6edf3canvasTb4b4b4.Te6edf3toDataURLTb4b4b4(Ta5d6ff"image/png"Tb4b4b4)Tb4b4b4;

Tff7b72if Tb4b4b4(Tff7b72!Te6edf3dataUrlTb4b4b4) Tff7b72returnTb4b4b4;

Tff7b72const Te6edf3printWindow Tff7b72= Tffa657windowTb4b4b4.Te6edf3openTb4b4b4(Ta5d6ff""Tb4b4b4, Ta5d6ff"_blank"Tb4b4b4)Tb4b4b4;

Te6edf3printWindowTb4b4b4.Tffa657documentTb4b4b4.Te6edf3writeTb4b4b4(Ta5d6ff`

Ta5d6ff <html>

<head>

<title>LXMF Paper Message</title>

<style>

body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; }

img { width: 400px; height: 400px; margin-bottom: 20px; }

.hash { font-family: monospace; font-size: 12px; color: #666; }

@media print { body { height: auto; padding: 20px; } }

</style>

</head>

<body>

<h1>LXMF Paper Message</h1>

<img src="Tffd700${Te6edf3dataUrlTffd700}Ta5d6ff" />

<div class="hash">Recipient: Tffd700${Tff7b72thisTb4b4b4.Te6edf3destinationHashTffd700}Ta5d6ff</div>

<p>Scan this code with an LXMF-compatible app to read the message.</p>

<script>window.onload = () => { window.print(); window.close(); }</scr' + 'ipt>

</body>

</html>

Ta5d6ff`Tb4b4b4)Tb4b4b4;

Te6edf3printWindowTb4b4b4.Tffa657documentTb4b4b4.Te6edf3closeTb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>

Tb4b4b4<Tff7b72style Te6edf3scopedTb4b4b4>

Tb4b4b4.T56d364glass-card Tb4b4b4{

@apply bg-white/90 Te6edf3darkTb4b4b4:Te6edf3bg-zinc-900Tff7b72/T79c0ff80 Te6edf3backdrop-blur Tff7b72border Tff7b72borderTff7b72-Tff7b72grayT79c0ff-200 Te6edf3darkTff7b72:Tff7b72borderTff7b72-Te6edf3zinc-800 Te6edf3rounded-3xl Te6edf3shadow-lg Tff7b72flex Tff7b72flexTff7b72-Te6edf3colTb4b4b4;

Tb4b4b4}

Tb4b4b4.T56d364glass-card__header Tb4b4b4{

@apply flex items-center justify-between gap-3 px-6 py-4 border-b border-gray-100/70 Te6edf3darkTb4b4b4:Tff7b72borderTff7b72-Te6edf3zinc-800Tff7b72/T79c0ff80Tb4b4b4;

Tb4b4b4}

Tb4b4b4.T56d364glass-card__header Tff7b72h2 Tb4b4b4{

@apply text-lg font-semibold text-gray-900 Te6edf3darkTb4b4b4:Tff7b72textTff7b72-Tff7b72whiteTb4b4b4;

Tb4b4b4}

Tb4b4b4.T56d364glass-card__body Tb4b4b4{

@apply px-6 py-6 text-gray-900 Te6edf3darkTb4b4b4:Tff7b72textTff7b72-Tff7b72grayT79c0ff-100Tb4b4b4;

Tb4b4b4}

Tb4b4b4.T56d364input-field Tb4b4b4{

@apply bg-gray-50/90 Te6edf3darkTb4b4b4:Te6edf3bg-zinc-800Tff7b72/T79c0ff80 Tff7b72border Tff7b72borderTff7b72-Tff7b72grayT79c0ff-200 Te6edf3darkTff7b72:Tff7b72borderTff7b72-Te6edf3zinc-700 Tff7b72textTff7b72-Te6edf3sm Te6edf3rounded-2xl Te6edf3focusTff7b72:Te6edf3ring-2 Te6edf3focusTff7b72:Te6edf3ring-blue-400 Te6edf3focusTff7b72:Tff7b72borderTff7b72-Tff7b72blueT79c0ff-400 Te6edf3darkTff7b72:Te6edf3focusTff7b72:Te6edf3ring-blue-50 Te6edf3darkTff7b72:Te6edf3focusTff7b72:Tff7b72borderTff7b72-Tff7b72blueT79c0ff-500 Tff7b72block Te6edf3w-full Te6edf3p-2T79c0ff.5 Tff7b72textTff7b72-Tff7b72grayT79c0ff-900 Te6edf3darkTff7b72:Tff7b72textTff7b72-Tff7b72grayT79c0ff-100 Tff7b72transitionTb4b4b4;

Tb4b4b4}

Tb4b4b4<Tb4b4b4/Tff7b72styleTb4b4b4>